<template>
  <div class="full-screen">
    <van-tabs v-model="active">
      <van-tab title="精选">
        <div class="ranking-list">
          <rankingList />
        </div>
      </van-tab>
      <van-tab title="运动户外">内容 2</van-tab>
      <van-tab title="母婴用品">内容 3</van-tab>
      <van-tab title="大家电">内容 4</van-tab>
      <van-tab title="手机数码">内容 5</van-tab>
      <van-tab title="生活家电">内容 6</van-tab>
      <van-tab title="电脑办公">内容 7</van-tab>
    </van-tabs>
    <div class="footer">
      <footer-bottom :activeIndex="2" />
    </div>
  </div>
</template>
<script>
import rankingList from './rankingList'
import footerBottom from '../../base/footerBottom'
export default {
  components: {
    rankingList,
    footerBottom,
  },
  data() {
    return {
      active: 0,
    }
  },
}
</script>
<style lang="less" scoped>
@import '../../../style/mixin';
.full-screen {
  // .fullScreen(@color:#fff);
}
// 排行列表开始
.ranking-list {
  height: 100%;
  overflow: hidden;
}
// 排行列表结束
// 修改vant的样式
/deep/.van-tabs__content {
  background: @backcolor;
  width: 100%;
  position: fixed;
  // 这里为什么用fixed 而不是用absolute 因为后者是相对于body。这里的body为0所以不能使用。
  // 而前者是相对于窗口不受body高度影响
  top: 1.877333rem;
  left: 0;
  bottom: 0;
  .van-tab__pane {
    height: 100%;
  }
}
</style>
